<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>法2 - CSS滚动驱动动画</title>
</head>
<body style="timeline-scope: --t1,--t2,--t3,--t4,--t5,--t6;">
  <!-- 1. 右侧-导航栏 布局： -->
  <nav>
    <a href="#t1" style="--s: --t1">一、标题一</a>
    <a href="#t2" style="--s: --t2">二、标题二</a>
    <a href="#t3" style="--s: --t3">三、标题三</a>
    <a href="#t4" style="--s: --t4">四、标题四</a>
    <a href="#t5" style="--s: --t5">五、标题五</a>
    <a href="#t6" style="--s: --t6">六、标题六</a>
  </nav>

  <!-- 1.2 左侧-主区域 布局： -->
  <h1>CSS 电梯导航</h1>
  <div class="content" style="--s: --t1">
    <h2 id="t1">一、标题一</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content" style="--s: --t2">
    <h2 id="t2">二、标题二</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content" style="--s: --t3">
    <h2 id="t3">三、标题三</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content" style="--s: --t4">
    <h2 id="t4">四、标题四</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content" style="--s: --t5">
    <h2 id="t5">五、标题五</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
  <div class="content" style="--s: --t6">
    <h2 id="t6">六、标题六</h2>
    <section>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </section>
  </div>
</body>
</html>